﻿<style type="text/css">
    .tab.active {
        color: red;
    }
</style>
<div class="bui-page">
    <header class="bui-bar">
        <div class="bui-bar-left">
            <a class="bui-btn btn-back"><i class="icon-back"></i></a>
        </div>
        <div class="bui-bar-main">store数据订阅器</div>
        <div class="bui-bar-right">
        </div>
    </header>
    <main>
        <p b-text="page.aa.0.test">点击输出多个参数</p>

        <!-- 公共数据 -->
        <b b-text="app.message2">公共数据</b>
        <b>{{app.firstName}}</b>
        <div b-template="app.tplLists(app.lists)"></div>

        <b b-bind="app.attrs">绑定标题</b>
        <b b-style="app.styles">绑定样式</b>
        <b b-class="app.tabClass" class="tab">绑定类名</b>

        <p b-show="app.showName">我是A,被控制的内容</p>
        <p b-show="!app.showName">我是B,被控制的内容</p>
        <label><input type="checkbox" b-model="app.showName" />点击可以控制A和B: <b b-text="app.showName"></b></label>


        <b>{{page.title}}</b>
        <div class="section-title">10.样式绑定</div>
        <p b-style="page.styles">绑定title属性,查看源码才能看到</p>

        <div class="section-title">1.简单双向绑定</div>
        <!-- 搜索条控件结构 -->
        <div id="searchbar" class="bui-searchbar bui-box">
            <div class="span1">
                <div class="bui-input">
                    <i class="icon-search"></i>
                    <input id="search" type="search" value="" placeholder="请输入关键字" b-model="page.message" />
                </div>
            </div>
        </div>
        <div class="section-title">正在输入: <b class="result" b-text="page.message"></b>
            <div id="reverseMessage" class="bui-btn btn-reverse">反序输入值</div>
        </div>
        <div class="section-title">2.显示隐藏</div>
        <p b-show="page.showName">我是A,被控制的内容</p>
        <p b-show="!page.showName">我是B,被控制的内容</p>
        <label><input type="checkbox" b-model="page.showName" />点击可以控制A和B: <b b-text="page.showName"></b></label>

        <div class="section-title">3.样式处理,支持对象,数组,数组不支持动态修改</div>
        <p b-class="page.tabClass" class="tab">样式有active样式</p>

        <div class="section-title">4.属性绑定</div>
        <p b-bind="page.attrs">绑定title属性,查看源码才能看到</p>

        <div class="section-title">5.联动数据,fullName 依赖于 firstName lastName</div>
        <!-- 这里computed需要设定关联的哪些字段, 跟vuejs不太一样 -->
        <b b-text="page.fullName"></b>

        <div class="section-title">6.事件绑定传参</div>
        <p b-click='page.getMessage({"id":123})'>点击输出参数是一个对象</p>
        <p b-click="page.getMessage(3,4)">点击输出多个参数</p>

        <div class="section-title">7.设置文本,支持对象</div>
        <p b-text="page.attrs.title"></p>

        <div class="section-title">8.设置Html</div>
        <b b-html="page.title"></b>


        <div class="section-title">9.模板绑定</div>
        // 模板1
        <ul b-template="page.tplList(page.sources)" class="bui-list">
        </ul>
        // 模板2
        <ul b-template="page.tplList2(page.sources)" class="bui-list">
        </ul>
        <script id="tpl-list" type="text/html">
            {{each listData item index}}
                <li class="bui-btn" href="pages/ui_controls/bui.store.html" >{{item}}</li>
            {{/each}}
        </script>

        // 模板3
        <div b-template="page.tplObject(page.objSource)">
        </div>
        // 模板4
        <div b-template="page.tplObjectArray(page.objSource.data)">
        </div>
    </main>
</div>
